<!-- 文章管理-文章分类 子路由组件-elementUI的Card 卡片实现页面制作 -->
<template>
  <div>
    <!-- 1.文章预览页 -->
    <el-card class="box-card">
      <!-- 1.1文章分类头部 -->
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button size="small" type="primary" @click="addCateShowDialogBtnFn">添加分类</el-button>

      </div>
      <!-- 1.2分类数据表格 -->
      <template>
        <el-table :data="cateList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column prop="cate_name" label="分类名称" align="center">
          </el-table-column>
          <el-table-column prop="cate_alias" label="分类别名" align="center">
          </el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <!-- v-slot插槽 -->
            <template v-slot="scope">
              <!-- scope里面的对象row存储着该条点击的数据对象 -->
              <el-button type="warning" size="mini" @click="updateCateBtnFn(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="deleteCateBtnFn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

    <!-- 2.点击添加文章分类-对话框 -->
    <!-- .sync类似v-model,可以给子组件实现“双向数据绑定” -->
    <!-- v-model本质:给所在的标签绑定value值 -->
    <!-- .sync本质:给所在的标签绑定props属性名=" Vue变量" -->
    <el-dialog :title="isEdit ? '编辑文章分类' : '添加文章分类'" :visible.sync="dialogFormVisible" width="35%" top="180px" @close="dialogCloseFn">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef">
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cate_name">
          <el-input v-model="addForm.cate_name" autocomplete="off" minlength="1" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" :label-width="formLabelWidth" prop="cate_alias">
          <el-input v-model="addForm.cate_alias" autocomplete="off" minlength="1" maxlength="10"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 1.导入文章分类的接口(获取、添加、删除)
import { getArtCateListAPI, addArtCateAPI, updateArtCateAPI, deleteArtCateAPI } from '@/api/index'
export default {
  name: 'my-artCate',
  data() {
    return {
      // 文章的分类列表
      cateList: [],
      dialogFormVisible: false,
      addForm: {
        cate_name: '',
        cate_alias: ''
      },
      addFormRules: {
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
        ]
      },
      formLabelWidth: '80px',
      isEdit: false, // true为编辑状态,false为新增状态
      editID: ''
    }
  },
  created() {
    this.getArtCateListFn()
  },
  methods: {
    // 1.获取文章分类的方法
    async getArtCateListFn() {
      // (1).调接口方法
      const { data: res } = await getArtCateListAPI()
      // 得到数组的倒叙:数组.reverse()
      this.cateList = res.data.reverse()
    },
    // 2.添加分类按钮点击事件-》为了让对话框出现
    addCateShowDialogBtnFn() {
      this.isEdit = false // 修改为新增状态标记
      this.editID = '' // 置空id值
      this.dialogFormVisible = true
    },
    // 3.对话框取消按钮-》点击事件-》让对话框消失
    cancelFn() {
      this.dialogFormVisible = false
      this.$message({
        message: `已取消${this.isEdit ? '修改' : '添加'}!`,
        type: 'warning',
        duration: 2000,
        customClass: 'windthClass'
      })
    },
    // 4.对话框确定按钮-》点击事件-》让对话框消失/调用保存文章分类的接口
    confirmFn() {
      this.$refs.addFormRef.validate(async valid => {
        if (valid) {
          if (!this.isEdit && this.editID === '') {
            // 4.1、调用新增的接口
            // (1).调用接口
            const { data: res } = await addArtCateAPI(this.addForm)
            // (2).失败,提示用户
            if (res.code !== 0) {
              return this.$message.error({
                message: `${res.message}`,
                duration: 2000,
                customClass: 'windthClass'
              })
            }
            // (3).成功,提示用户
            this.$message.success({
              message: `${res.message}`,
              duration: 2000,
              customClass: 'windthClass'
            })
            // (4).重新请求列表数据(生命周期,不会挂载到this身上,所以无法this.created)
            this.getArtCateListFn()
            // (5).让对话框消失
            this.dialogFormVisible = false
          } else {
            // 4.2、调用修改的接口
            // (1).调用接口
            // this.addForm.id=this.editID或者下面的写法
            // console.log({ ...this.addForm })
            const { data: res } = await updateArtCateAPI({ id: this.editID, ...this.addForm })
            // (2).失败,提示用户
            if (res.code !== 0) {
              return this.$message.error({
                message: `${res.message}`,
                duration: 2000,
                customClass: 'windthClass'
              })
            }
            // (3).成功,提示用户
            this.$message.success({
              message: `${res.message}`,
              duration: 2000,
              customClass: 'windthClass'
            })
            // (4).重新请求列表数据(生命周期,不会挂载到this身上,所以无法this.created)
            this.getArtCateListFn()
            // (5).让对话框消失
            this.dialogFormVisible = false
          }
        } else {
          return false
        }
      })
    },
    // 5.对话框-关闭时的回调
    dialogCloseFn() {
      this.$refs.addFormRef.resetFields()
    },
    // 经验:如果用同一个按钮,想要做状态区分
    // (1).定义一个标记变量isEdit(true编辑,false新增),还要定义要编辑的数据唯一的id值,editID
    // (2).在点击修改的时候,isEdit改为 true,editID保存要修改的数据id
    // (3).在点击新增按钮的时候,isEdit改为 false,editID置空
    // (4).在点击保存按钮的时候,就可以用 isEdit 变量做区分了

    // 6.修改分类按钮-》点击事件(先做数据的回显)
    updateCateBtnFn(obj) {
      console.log(obj)
      this.isEdit = true // 修改为编辑状态
      this.editID = obj.id // 添加id值
      // (1).让对话框出现
      this.dialogFormVisible = true
      // (2).数据的回显(存在小bug,所以要异步执行,先让初始值为“空”)
      // 优化:让el-dialog第一次挂载el-form时,先用addform空字符串初始值绑定到内部,后续用作resetFilelds重置
      // 所以让真实的DOM创建并在内部绑定好复制好初始值
      // 设置数据回显(会把 xx 回调推迟到下一个 DOM 更新周期之后执行)
      this.$nextTick(() => {
        this.addForm.cate_name = obj.cate_name
        this.addForm.cate_alias = obj.cate_alias
      })
    },
    // 7.删除分类按钮-》点击事件
    deleteCateBtnFn(obj) {
      this.editID = obj.id // 添加id值
      this.$confirm('是否删除该文章分类?', '删除分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // (1).调用重置密码的接口
          const { data: res } = await deleteArtCateAPI(this.editID)
          // (2).失败,提示用户
          if (res.code !== 0) {
            return this.$message.error({
              message: `${res.message}`,
              duration: 2000,
              customClass: 'windthClass'
            })
          }
          // (3).成功,提示用户
          this.$message.success({
            message: `${res.message}`,
            duration: 2000,
            customClass: 'windthClass'
          })
          // (4).重新请求列表数据
          this.getArtCateListFn()
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除!',
            duration: 2000,
            customClass: 'windthClass'
          })
        })
    }
  }
}
// 小bug:复现(第一次进来点击编辑,然后点击新增,会出现表单数据的不清空现象)、
// 原因:点击修改后,关闭对话框的时候,置空失效了
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-box span {
  font-size: 16px;
  font-weight: 700;
}

.box-card {
  width: 100%;
  background-color: rgba(242, 242, 242, 0.6);
}

/deep/ .el-table {
  background-color: rgba(242, 242, 242, 0.6);
  border-radius: 10px;
}
/deep/ .el-table tr {
  background-color: rgba(242, 242, 242, 0.6);
}
/deep/ .el-table th.el-table__cell {
  background-color: rgba(242, 242, 242, 0.6);
}
// /deep/ .el-table__body tr.hover-row > td {
//   background-color: rgba(242, 242, 242, 1) !important;
// }
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(242, 242, 242, 1) !important;
}
</style>
